<template>
  <panel-head></panel-head>
  <el-card style="min-height: 100%">
    <el-button
      type="primary"
      size="small"
      icon="Plus"
      @click="dialogFormVisible = true"
      >新增</el-button
    >
    <!-- 表格 -->
    <el-table :data="permissionTableData">
      <el-table-column prop="id" label="id" />

      <el-table-column prop="name" label="昵称" show-overflow-tooltip />

      <el-table-column
        prop="permissions_id"
        label="所属组别"
        show-overflow-tooltip
      >
        <template #default="scope">
          {{ permissinName(scope.row.permissions_id) }}
        </template>
      </el-table-column>

      <el-table-column prop="mobile" label="手机号" />

      <el-table-column prop="permissions_id" label="状态">
        <template #default="scope">
          <el-tag :type="scope.row.active ? 'success' : 'danger'">
            {{ scope.row.active ? "正常" : "失效" }}
          </el-tag>
        </template>
      </el-table-column>

      <el-table-column prop="create_time" label="时间">
        <template #default="scope">
          <div class="flex">
            <el-icon><Clock /></el-icon>
            <span>{{ scope.row.create_time }}</span>
          </div>
        </template>
      </el-table-column>

      <el-table-column label="操作">
        <template #default="scope">
          <el-button type="primary" @click="open(scope.row)">编辑</el-button>
        </template>
      </el-table-column>
    </el-table>

    <div class="pagination-box">
      <el-pagination
        v-model:current-page="paginationData.pageNum"
        :page-size="paginationData.pageSize"
        layout="total, prev, pager, next"
        :total="permissionTableTotal"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </el-card>
  <!-- 弹框 -->
  <el-dialog
    v-model="dialogFormVisible"
    :before-close="handleBeforeClose"
    title="添加权限"
    width="500px"
  >
    <el-form ref="formRef" :model="form" :rules="rules" label-width="80px">
      <!-- 表单内容待补充 -->
      <el-form-item prop="mobile" label="手机号">
        <el-input v-model="form.mobile" placeholder="请填写手机号" disabled />
      </el-form-item>
      <el-form-item prop="name" label="昵称">
        <el-input v-model="form.name" placeholder="请填写昵称" />
      </el-form-item>
      <el-form-item prop="permissions_id" label="菜单权限">
        <el-select v-model="form.permissions_id" placeholder="请选择菜单权限">
          <el-option
            v-for="item in permissionData"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          />
        </el-select>
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button type="primary" @click="handleConfirm(formRef)"
          >确认</el-button
        >
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import dayjs from "dayjs";
import { useStore } from "vuex"
import { ref, reactive, onMounted, nextTick } from "vue";
import {
  getUserMenuApi,
  authAdminApi,
  getMenuSelectListApi,
  userUpadateApi,
} from "../../../api/index";

const store = useStore()

/* 表单数据 */
const form = reactive({
  id: "",
  name: "",
  permissions_id: "",
});

const rules = reactive({
  name: [{ required: true, trigger: "blur", message: "请输入权限名称" }],
  permissions_id: [
    { required: true, trigger: "blur", message: "请选择菜单权限" },
  ],
});

/** 获取下拉权限列表 */
const permissionData = ref([]);
const getMenuList = async () => {
  const { code, data } = await getMenuSelectListApi();
  if (code === 10000) {
    permissionData.value = data;
  }
};

/** 根据权限id匹配权限名称 */
const permissinName = (id) => {
  const data = permissionData.value.find((el) => el.id === id);
  return data ? data.name : "超级管理员";
};

/** 表单提交 */
const formRef = ref();
const treeRef = ref();
const handleConfirm = (formEl) => {
  if (!formEl) return;
  formEl.validate(async (valid) => {
    if (valid) {
      // 获取选择的数据
      const { code, data } = await userUpadateApi({
        name: form.name,
        permissions_id: form.permissions_id,
        id: form.id,
      });
      if (code === 10000) {
        ElMessage.success(data);
        handleBeforeClose();
        getListData();
      }
    } else {
      console.log("error submit!");
    }
  });
};

/** 列表数据 */
const paginationData = reactive({
  pageNum: 1,
  pageSize: 10,
});

/** 表格数据 */
const permissionTableData = ref([]);
const permissionTableTotal = ref([]);
const getListData = async () => {
  const { code, data } = await authAdminApi({
    ...paginationData,
  });
  if (code === 10000) {
    data.list.forEach((item) => {
      item.create_time = dayjs(item.create_time).format("YYYY-MM-DD");
    });
    permissionTableData.value = data.list;
    permissionTableTotal.value = data.total;
  }
};

/**  页数改变 */
const handleSizeChange = (val) => {
  paginationData.pageSize = val;
  getListData();
};

/** 上一页、下一页 */
const handleCurrentChange = (val) => {
  paginationData.pageNum = val;
  getListData();
};

/** 打开弹框 */
const dialogFormVisible = ref(false);
const open = (rowData = {}) => {
  dialogFormVisible.value = true;
  nextTick(() => {
    if (Object.keys(rowData).length) {
      Object.assign(form, { id: rowData.id, mobile: rowData.mobile, name: rowData.name, permissions_id: rowData.permissions_id });
    }
  });
};

/** 关闭弹框 */
const handleBeforeClose = () => {
  form.id = "";
  dialogFormVisible.value = false;
  formRef.value.resetFields();
};

onMounted(() => {
  getMenuList();
  getListData();
});
</script>